<script setup defer async lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { API_IMG_URL } from '@/utils/apiUrl'
	import { useDraggable } from '@/utils/useDraggable';
import {
  banner,
  taskList,
  taskBaseList,
  taskStage,
  homeAnnouncement,
  configList,platformConfig,
  getHomeAnnouncement,
  getInstallBookmarkInfo,pointsInfo,
  settleInstallBookmarkInfo,getWithdrawalChannel
} from '@/api/user'
import { useI18n } from 'vue-i18n'
import { getUuid, checkFirstVisit,convertNumbers } from '@/utils/utils'
import { useUserInfo } from '@/store/user'
	import { useRouter } from "vue-router";
	const route = useRouter();
	const router = useRouter();
	const statIdCode=ref("");
	const promoCode=ref("");
//language
const userInfoStore = useUserInfo()
const { t, locale } = useI18n()
const imgUrl = ref(API_IMG_URL())
// const imgUrl = ref(import.meta.env.VITE_IMG_URL)
const installCertificateShow = ref(false) // 
const lagdataIsClick = ref(false) // 
const showTips = ref(false) // tips
const hasVisited = ref(uni.getStorageSync('hasVisited'))
const rulesPopusShow = ref(false)
// const installBookMarkShow = ref(false);
const isChecked = ref(false)
const iframeTopValue = ref('0px')
const iframeHeghtValue = ref('0px')
const switchLanguage = (lang: any) => {
  locale.value = lang //chang language
  uni.setStorageSync('langs', lang)
  // 
  uni.setNavigationBarTitle({
    title: t('home'), // 
  })
}
const symbol = ref('$')
const lagdata = reactive({
  showselect: false,
  index: 0,
})
const allocationList=ref([])
	//
	const rateArray=ref([])
	//
	const exchangeRate=ref(1);
const countryIsClick = ref(false); // 
const countryData = reactive({
		showselect: false,
		index: 1,
	})
	const openChooseCountry = (event) => {
		countryData.showselect = true;
		countryIsClick.value = true;
	}
	const setCountryClose = () => {
		countryData.showselect = false;
	}
	const setCountryOpen = () => {
		countryData.showselect = true;
	}
	const country=ref(1);
	const selectCountry = () => {
		if (countryData.index === 1) {
			symbol.value = '₹'
			country.value=1;
		}
		if (countryData.index === 2) { //
			symbol.value = 'Rp'
			country.value=2;
		}
		if (countryData.index === 3) { //
			symbol.value = '₦'
			country.value=3;
		}
		if (countryData.index === 4) { //
			symbol.value = '৳'
			country.value=4;
		}
		if (countryData.index === 5) { //
			symbol.value = 'Rs'
			country.value=5;
		}
		//
		const foundRate = rateArray.value.find(item => item.country === country.value);
		exchangeRate.value = foundRate ? foundRate.content : 1;
		uni.setStorageSync('symbol', symbol.value);
		uni.setStorageSync('country', country.value);
		uni.setStorageSync('exchangeRate',exchangeRate.value);
		setCountryClose();
	}
const openChooseLanguage = () => {
  lagdata.showselect = true
  lagdataIsClick.value = true
}
const setLanguageOpen = () => {
  lagdata.showselect = true
}
const setLanguageClose = () => {
  lagdata.showselect = false
}
const pluss = (arr: Array<any>) => {
  let count = 0
  arr.map((item: any) => {
    count = count + item.rewardUpper
  })
  count=convertNumbers(count,exchangeRate.value);
  return count
}
const plussTask = (arr: Array<any>) => {
  let count = 0
  arr.map((item: any) => {
    count = count + item.rewardLower
  })
   count=convertNumbers(count,exchangeRate.value);
  return count
}

const noticeList = (list: any[], type: number): string[] => {
  return list.map((item: any) => {
    const rewardRange = `${convertNumbers(item.rewardLower / 100, exchangeRate.value)} - ${convertNumbers(item.rewardUpper / 100, exchangeRate.value)}${symbol.value}`;

    switch (type) {
      case 5:
        return `${t('Invite')}${item.valueCount} ${t('People')} ${rewardRange}`;
      case 2:
        return `${t('Standing')}${item.valueTime / 60} M ${rewardRange}`;
      default:
        return `${t('ScanCode')}${item.valueCount} ${t('Account')} ${rewardRange}`;
    }
  });
};

const showTipsClose = () => {
  showTips.value = false
}
const showTipsOpen = () => {
  showTips.value = true
}
const goRegister = () => {
  uni.setStorageSync('hasVisited', 'true')
  let queryUrl
  if (uni.getStorageSync('code')) {
    queryUrl = `?code=${uni.getStorageSync('code')}`
  }
  if (uni.getStorageSync('code')) {
    queryUrl = `?code=${uni.getStorageSync('promo_code')}`
  }
  // if (!uni.getStorageSync('code') && !uni.getStorageSync('promo_code')) {
  // 	window.top?.postMessage('/pages/login/register', window.location.origin);
  // 	return;
  // }
  if (uni.getStorageSync('code') || uni.getStorageSync('promo_code')) {
    window.top?.postMessage(`/pages/login/register`, window.location.origin)
    uni.navigateTo({
      url: '/pages/login/register',
    })
  } else {
    window.top?.postMessage(`/pages/login/index`, window.location.origin)
    uni.navigateTo({
      url: '/pages/login/index',
    })
  }
}
const languageMap = {
  0: 'hi',
  1: 'en',
  2: 'hausa',
  3: 'mjl',
  4: 'tam',
  5: 'urdu',
  6: 'id',
  7: 'tel',
}
const selectLanguage = () => {
  if (hasVisited.value) {
    window.top?.postMessage('/pages/index/index', '*')
  }

  const languageCode = languageMap[lagdata.index]
  if (languageCode) {
    switchLanguage(languageCode)
  }
  setLanguageClose()
  if (!hasVisited.value) {
    showTipsOpen()
    rulesPopusShow.value = true
  }
}
//swiper
const swiperdata = reactive({
  swiperIndx: 0,
  list: [{ jump_link: '' }],
  listdata: [],
})
//
const getCurrent = (data: any) => {
  let current = 0
  data.forEach((item: any) => {
    current = current + item.completed
  })
  return current
}
const swiperChange = (e: any) => {
  // console.log(e.current)
  swiperdata.swiperIndx = e.current
}

const clickSwiper = (e: any) => {
  if (hasVisited.value) {
    // Get base URL
    const baseUrl = swiperdata.listdata[e]?.jump_link
    // Add query parameters
    const queryParams = {
      prevPage: 'home',
    }

    // Build full URL with query string
    const fullUrl = `${baseUrl}?${Object.entries(queryParams)
      .filter(([_, value]) => value)
      .map(([key, value]) => `${key}=${value}`)
      .join('&')}`
    window.top?.postMessage(fullUrl, window.location.origin)
    uni.navigateTo({
      url: fullUrl,
    })
  }
  if (!hasVisited.value) {
    showTipsOpen()
  }
}
//notice
const noticedata = reactive({
  list: ['new vioce', 'four news'],
})
//page
const pagedata = reactive({
  taskStageList: {
    getNewUser: { data: [], invite: 0 },
    groupMember: { data: [], invite: 0 },
    online: { data: [], invite: 0 },
    scanCode: { data: [], invite: 0 },
  },
  taskDetail: { ChanTask: { type: 1 }, Phase: [{}] },
  showTask: false,
  timer: {},
  targetTimestamp: 1733258800000, //  (2024124 10:00:00)
  countdown: {
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  },
  totalPoints: 0,
  pagelist: new Map([
    ['home', 'index/index'],
    ['scan', 'scan/index'],
    ['user', 'user/index'],
    ['leaderBoard', 'user/leaderBoard/index'],
    ['invite', 'index/invite/invite'],
    ['withdraw', 'withdraw/index'],
  ]),
  taskList: { ChanTask: [{ ChanTask: { type: 1 }, Phase: [{ rewardUpper: 0 }] }] },
  taskInfo: { title: '', content: '', sort_value: 0 },
  taskInfos: [],
  aircraftUrl: '',
  langlistMap: new Map([
  			['hi', 0],
  			['en', 1],
  			['zh', 2],
  			['kan', 3],
  			['mala', 4],
  			['mar', 5],
  			['tam', 6],
  			['tel', 7],
  		]),
  langlistMapTest: new Map([
  	['₹', 1],
  	['Rp', 2],
  	['₦', 3],
  	['৳', 4],
  	['Rs', 5],
  ]),
})

const isAnimating = ref(false)
const navRankList = (index: any, page: any) => {
  if (isAnimating.value) return
  isAnimating.value = true
  // 
  const view = document.querySelector(`.aniview${index}`)
  view.classList.add('shrink')

  // 
  setTimeout(() => {
    view.classList.remove('shrink')
    view.classList.add('grow')
    setTimeout(() => {
      view.classList.remove('grow')
      isAnimating.value = false
      changPage(page)
      // router.push({ path: '/pages/target/target' });
    }, 100) // CSS
  }, 100) // CSS
}
	const showTasks = (item : any) => {
		if (!hasVisited.value) {
			showTipsOpen()
			return
		}
		pagedata.taskDetail = item
		pagedata.taskInfo = pagedata.taskInfos.filter((items : any) => item.ChanTask.type == items.task_type_order)[0]
		if (pagedata.taskInfo) {
			pagedata.showTask = true
		} else {
			// showTipsOpen();
			uni.showToast({
				title: t('empty'),
				icon: 'none',
			})
		}
	}
const pageIndex = ref(0)
const changPage = (e: any) => {
  const path = pagedata.pagelist.get(e)
  if (!path) {
    return
  }
  if (hasVisited.value) {
    window.top?.postMessage(`/pages/${path}`, window.location.origin)
    uni.navigateTo({
      url: '/pages/' + path,
    })
  }
  if (!hasVisited.value) {
    showTipsOpen()
  }
}
const changMainPage = (e: any) => {
  if (hasVisited.value) {
    if (pagedata.timer) {
      clearInterval(pagedata.timer)
    }
    window.top?.postMessage(`/pages/${pagedata.pagelist.get(e)}`, window.location.origin)
    uni.navigateTo({
      url: '/pages/' + pagedata.pagelist.get(e),
    })
  }
  if (!hasVisited.value) {
    showTipsOpen()
  }
}
const decodeHtmlString = (str: string) => {
  //  <p> 
  str = str.replace(/^<p>|<\/p>$/g, '')

  //  HTML 
  const textarea = document.createElement('textarea')
  textarea.innerHTML = str
  let decoded = textarea.value

  // 
  decoded = decoded.replace(/\\"/g, '"')

  return decoded
}
const boundRulesContent = ref()
	const rateAllocation=ref(0);

const initPage = async () => {
	 if (userInfoStore.token) {
	    let params = {}
	    if (userInfoStore.isPwa) params.from = 'bookmark'
	    const pointRes = await pointsInfo(params)
	    if (pointRes.code == 0) {
	      uni.setStorageSync('totalPoints', pointRes.data.totalPoints)
	    }
	  }
  pagedata.totalPoints = uni.getStorageSync('totalPoints') || 0

  const res = await banner({});
  if (res.code == 0) {
    swiperdata.list = []
    swiperdata.listdata = res.data
    //  listdata  sort_value 
    swiperdata.listdata.sort((a, b) => {
      return a.sort_value - b.sort_value
    })
    swiperdata.listdata.map((item: any) => swiperdata.list.push(imgUrl.value + '/' + item.image))
    //  listdata 
    // swiperdata.listdata = [swiperdata.listdata[0]];
    // console.log(swiperdata.list[)
  }
  const rateReq = await configList({
  	type: 1,
  	fixedKey: 2,
  })
  rateAllocation.value=rateReq.data.content;
  uni.setStorageSync('rateAllocation',rateAllocation.value);
  //
  const req = await getWithdrawalChannel();
  allocationList.value = req.data;
  rateArray.value = allocationList.value.map(item => ({
    country: item.country, 
    content: item.content.split(':')[1] 
  }));
  //
  const foundRate = rateArray.value.find(item => item.country === country.value);
  exchangeRate.value = foundRate ? foundRate.content : 1;
  uni.setStorageSync('exchangeRate',exchangeRate.value);
  if (!hasVisited.value) {
    const params: any = {}
    
    if (statIdCode.value !== '') {
      params.statId = statIdCode.value
    }
    if (promoCode.value !== '') {
      params.promo_code = promoCode.value
    }
    
    const ress = await taskBaseList(params)

    if (ress.code == 0) {
      pagedata.taskList = ress.data
      let arr = [[], [], [], []]
      pagedata.taskList.ChanTask.forEach((item: any, index: any) => {
        const uuid = getUuid()
        item.Phase.forEach((phaseItem, index) => {
          const uuid = getUuid()
          item.Phase[index].uuid = uuid
        })
        arr[[4, 2, 3, 5].indexOf(item.ChanTask.type)] = {
          ...item,
          uuid,
        }
      })
      pagedata.taskList.ChanTask = arr
      pagedata.taskList.ChanTask = arr.filter((item) => {
        return Array.isArray(item) ? item.length > 0 : item
      })
    }
  } else {
    const ress = await taskList({})
    if (ress.code == 0) {
      pagedata.taskList = ress.data
      let arr = [[], [], [], []]
      pagedata.taskList.ChanTask.forEach((item: any, index: any) => {
        const uuid = getUuid()
        item.Phase.forEach((phaseItem, index) => {
          const uuid = getUuid()
          item.Phase[index].uuid = uuid
        })
        arr[[4, 2, 3, 5].indexOf(item.ChanTask.type)] = {
          ...item,
          uuid,
        }
      })
      pagedata.taskList.ChanTask = arr
      pagedata.taskList.ChanTask = arr.filter((item) => {
        return Array.isArray(item) ? item.length > 0 : item
      })
    }
    const rep = await homeAnnouncement({type:1})
    if (rep.code == 0) {
      pagedata.taskInfos = rep.data
    }

    // 
    const resStage = await taskStage()
    if (resStage.code == 0) {
      pagedata.taskStageList = resStage.data
    }
   
  }
   // getInstallInfo()
  //,
  let showCount = uni.getStorageSync('showTips')
  if (showCount == 1) {
    rulesPopusShow.value = true
    getBounsRluesContent()
    uni.removeStorageSync('showTips')
	countryData.showselect = true;
	// lagdata.showselect = true;
  }
}

initPage()

// 
const updateCountdown = () => {
  const now = Date.now()
  const diff = pagedata.targetTimestamp - now

  if (diff <= 0) {
    clearInterval(pagedata.timer)
    pagedata.countdown.days = 0
    pagedata.countdown.hours = 0
    pagedata.countdown.minutes = 0
    pagedata.countdown.seconds = 0
    return
  }

  pagedata.countdown.days = Math.floor(diff / (1000 * 60 * 60 * 24))
  pagedata.countdown.hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
  pagedata.countdown.minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
  pagedata.countdown.seconds = Math.floor((diff % (1000 * 60)) / 1000)
}

// 
const startCountdown = () => {
  updateCountdown() // 
  pagedata.timer = setInterval(updateCountdown, 1000)
}

const getAircraft = async () => {
  const reps = await platformConfig()
  if (reps.code == 0) {
    // console.log(rep)
    pagedata.aircraftUrl = 'https://t.me/' + reps.data.customer_telegram
    uni.setStorageSync('aircraftUrl', pagedata.aircraftUrl)
  }
}

const getBounsRluesContent = async () => {
  const reps = await getHomeAnnouncement({
    // id: 39,
	type:3
  })
  if (reps.code == 0) {
    boundRulesContent.value = decodeHtmlString(reps.data.content)
  }
}

const installBookmarkInfo = ref({})

const getInstallInfo = async () => {
  const res = await configList({
    type: 2,
    fixedKey: 4,
  })
  // ToDo
  if (res.code === 0) {
    installCertificateShow.value = !res.data.userId
    installBookmarkInfo.value = res.data
  }
}
// getInstallInfo();

const ifn = async () => {
  const res = await settleInstallBookmarkInfo()
  if (res.code === 0) {
    uni.showToast({
      title: `${t('success')}!`,
      icon: 'none',
      duration: 2000,
    })
    installCertificateShow.value = false
  }
  // ToDo
  if (res.code === 0) {
    installCertificateShow.value = !!res.data.userId
  }
}

let deferredPrompt: any = null // 
	const openUrl = () => window.open(pagedata.aircraftUrl, '_blank');
const { dragPosition, startDrag } = useDraggable(32, openUrl);
const installCertificate = async () => {
  console.log('Install certificate clicked')
  console.log('Deferred prompt:', userInfoStore.deferredPrompt)

  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
  // if (isMobile) {
  // 	installBookMarkShow.value = true;
  // }
  if (!hasVisited.value) {
    return showTipsOpen()
  }
  // 如果有 userInfoStore.deferredPrompt，则触发安装提示
  if (userInfoStore.deferredPrompt) {
    userInfoStore.deferredPrompt.prompt()
    userInfoStore.deferredPrompt.userChoice.then((choiceResult: any) => {
      if (choiceResult.outcome === 'accepted') {
        if (!isMobile) location.reload()
        console.log('User accepted the installation')
        // ifn() // 安装成功后调用
      } else {
        console.log('User dismissed the installation')
      }
      userInfoStore.setDeferredPrompt(null)
    })
  } else {
    console.log('No installation prompt available')
  }
}

const iKnowConfirm = () => {

  rulesPopusShow.value = false
}

// const handleChange = (e: any) => {
//   isChecked.value = !isChecked.value
// }

	onMounted(async() => {
		console.log("userInfoStore.deferredPrompt",userInfoStore.deferredPrompt)
		if (uni.getStorageSync('langs')) {
			const lang = uni.getStorageSync('langs') || 'en'; //  'en'
			symbol.value = uni.getStorageSync('symbol') || '$'; // ， '$'
			country.value=uni.getStorageSync('country') || 0;
			countryData.index = pagedata.langlistMapTest.get(symbol.value) ?? 0; // 
			lagdata.index = pagedata.langlistMap.get(lang) ?? 2; //  index  2（）
		}
		statIdCode.value=uni.getStorageSync('code') || '';
		promoCode.value=uni.getStorageSync('promo_code') || '';
		if (route.currentRoute.value.query.code || uni.getStorageSync("code")) {
			statIdCode.value=route.currentRoute.value.query.code ||   uni.getStorageSync("code")
					uni.setStorageSync('code', statIdCode.value)
					
				}
				
				if (route.currentRoute.value.query.promo_code || uni.getStorageSync("promo_code")) {
					promoCode.value=route.currentRoute.value.query.promo_code|| uni.getStorageSync("promo_code")
					uni.setStorageSync('promo_code',promoCode.value)
					
				}
		const token = uni.getStorageSync("token");
		if (route.currentRoute.value.href == "/pages/index/index" && !token) {
			uni.removeStorageSync('hasVisited');
			hasVisited.value = null;
		}
		//  task!Earn money so easy!
		uni.setNavigationBarTitle({
			title: 'Ttask!' + t('Earn money so easy') + '!' // 
		});

		if (!hasVisited.value) {
			countryData.showselect = true;
			lagdata.showselect = true;
			getBounsRluesContent();
			// countryData.showselect = true;
		} else {
			startCountdown();
			getAircraft();
		}
		uni.setStorageSync('symbol', symbol.value);
	});
</script>

<template>
	<view class="content">
		<view class="tops">
			<view class="lefts" @click="changPage('withdraw')">
				<view class="rt">
					<image src="../../static/img/point.png" style="margin-left: -0.3rem;" />
					<view>
						{{convertNumbers(pagedata.totalPoints,exchangeRate)}} {{symbol}}
					</view>
				</view>
				<span class="liti">{{ t('withdraw') }}</span>
			</view>
			<view class="rights">
				<image class="globe-icon" src="../../static/img/lgs.png" @click="openChooseLanguage" />
				<image class="globe-icon" src="../../static/img/gj.png" @click="openChooseCountry" />
			</view>
			
		</view>
		<view class="body">
			<view class="swipers">
				<up-swiper :radius="20" :height="200" :list="swiperdata.list" @change="swiperChange" :indicator="true"
					@click="clickSwiper" :autoplay="true">
					<template #indicator>
						<view style="display: flex;flex-flow: column;width: 100%;">
							<view style="width: 100%;">
								<view v-show="swiperdata.swiperIndx==0" class="custom-button" @click="navRankList(1, 'leaderBoard')">{{t('View Now')}}</view>
							</view>
							<view
								style="display: flex;flex-flow: row;width: 100%;justify-content: center;align-items: center;">
								<view v-for="(item,index) in swiperdata.list"  :key="index"
									:class="swiperdata.swiperIndx==index?'indicatorsuper':'indicators'"></view>
							</view>
						</view>
					</template>
				</up-swiper>
			</view>
			<!--  -->
			<view :class="'aniview'+1" v-if="userInfoStore.deferredPrompt">
				<view  class="card4" >
					<!--  -->
					<view class="bg-decoration">
						<view class="circle circle-1"></view>
						<view class="circle circle-2"></view>
						<view class="circle circle-3"></view>
						<view class="floating-shape shape-1"></view>
						<view class="floating-shape shape-2"></view>
						<view class="floating-shape shape-3"></view>
					</view>
					<view class="ct">
						<image src="../../static/index/phone1.png" />
						<view class="ctr">
							<span style="font-size:0.8rem;font-weight: bold;">{{t('DOWNLOAD APP')}}</span>
							<span style="font-size:0.7rem;">
								{{symbol}}{{ convertNumbers(installBookmarkInfo?.content,exchangeRate)}}+
							</span>
						</view>
						<view class="get_box" @click="installCertificate" id="installButton">
							{{t('GET')}}
						</view>
						
					</view>
				</view>
			</view>
			<view v-for="(item,index) in pagedata.taskList.ChanTask" :key="item.uuid" :class="'aniview'+index">
				
				<!--  groupMember-->
				<view class="card1" v-show="item.ChanTask.type==5">
					<!--  -->
					<view class="bg-decoration">
						<view class="circle circle-1"></view>
						<view class="circle circle-2"></view>
						<view class="circle circle-3"></view>
						<view class="floating-shape shape-1">💎</view>
						<view class="floating-shape shape-2">🏆</view>
						<view class="floating-shape shape-3">💰</view>
					</view>
					
					<view class="ct" @click="navRankList(index, 'invite')">
						<image src="../../static/img/rtop1.png" />
						<view class="ctr">
							<span style="font-size:0.8rem;font-weight: bold;">{{t('Invite New User')}}</span>
							<span style="font-size:0.7rem;">{{pagedata.taskStageList.groupMember?.invite}}
								{{t('People')}}</span>
						</view>
						<view style="font-weight: bold;font-size: 0.8rem;margin-left: auto;">{{symbol}}
							{{pluss(item.Phase)/100}}+
						</view>
					</view>
					<view class="cc" @click="navRankList(index, 'invite')">
						<up-steps :current="getCurrent(pagedata.taskStageList.groupMember?.data)"
							active-color="#ff006e">
							<up-steps-item v-for="(items,indexs) in item.Phase" :key="items.uuid">
								<template #icon>
									<view
										:class="pagedata.taskStageList.groupMember.data[indexs]?.completed==1?'stepitemsc':'stepitems'">
										{{convertNumbers(items.rewardUpper/100,exchangeRate)}}{{symbol}}
									</view>
								</template>
							</up-steps-item>
						</up-steps>
					</view>
					<view class="cb">
						<view class="cnots">
							<view style="width: 80%;"><up-notice-bar icon="volume-fill"
									:text="noticeList(item.Phase,item.ChanTask.type)" direction="column"
									bgColor="transparent" fontSize="0.8rem" color="#fff"
									style="border-radius:0.6rem;"></up-notice-bar></view>
							<up-button type="primary" :plain="true" :text="t('Detail')" class="detailbtn"
								@click="showTasks(item)"></up-button>
						</view>
					</view>
				</view>
				<!--  online-->
				<view class="card1" v-show="item.ChanTask.type==2">
					<!--  -->
					<view class="bg-decoration">
						<view class="circle circle-1"></view>
						<view class="circle circle-2"></view>
						<view class="circle circle-3"></view>
						<view class="floating-shape shape-1">⏰</view>
						<view class="floating-shape shape-2">🎯</view>
						<view class="floating-shape shape-3">⭐</view>
					</view>
					
					<view class="ct" @click="navRankList(index, 'leaderBoard')">
						<image src="../../static/img/shetuanbiao.png" />
						<view class="ctr">
							<span style="font-size:0.8rem;font-weight: bold;">{{t('Standing Machine Task')}}</span>
							<span style="font-size:0.7rem;">{{Math.floor(pagedata.taskStageList.online?.invite/60)}}
								M</span>
						</view>
						<view style="font-weight: bold;font-size: 0.8rem;margin-left: auto;">{{symbol}}
							{{pluss(item.Phase)/100}}+
						</view>
					</view>
					<view class="cc" @click="navRankList(index, 'leaderBoard')">
						<up-steps :current="getCurrent(pagedata.taskStageList.online?.data)" active-color="#ff006e">
							<up-steps-item v-for="(items,indexs) in item.Phase" :key="items.uuid">
								<template #icon>
									<view
										:class="pagedata.taskStageList.online.data[indexs]?.completed==1?'stepitemsc':'stepitems'">
										{{convertNumbers(items.rewardUpper/100,exchangeRate)}}{{symbol}}
									</view>
								</template>
							</up-steps-item>
						</up-steps>
					</view>
					<view class="cb">
						<view class="cnots" >
							<view style="width: 80%;">
								<up-notice-bar icon="volume-fill" :text="noticeList(item.Phase,item.ChanTask.type)"
									direction="column" color="#fff" bgColor="transparent"
									fontSize="0.8rem"></up-notice-bar>
							</view>
							<up-button type="primary" :plain="true" :text="t('Detail')" class="detailbtns"
								@click="showTasks(item)"></up-button>
						</view>
					</view>
				</view>
				<!--  scanCode-->
				<view class="card1" v-show="item.ChanTask.type==3">
					<!--  -->
					<view class="bg-decoration">
						<view class="circle circle-1"></view>
						<view class="circle circle-2"></view>
						<view class="circle circle-3"></view>
						<view class="floating-shape shape-1">📱</view>
						<view class="floating-shape shape-2">🔍</view>
						<view class="floating-shape shape-3">💫</view>
					</view>
					
					<view class="ct" @click="navRankList(index, 'scan')">
						<image src="../../static/img/saoma.png" />
						<view class="ctr">
							<span style="font-size:0.8rem;font-weight: bold;">{{t('Scan Code Tasks')}}</span>
							<span style="font-size:0.7rem;">{{pagedata.taskStageList.scanCode?.account}}
								{{t('Account')}}</span>
						</view>
						<view style="font-weight: bold;font-size: 0.8rem;margin-left: auto;">{{symbol}}
							{{pluss(item.Phase)/100}}+
						</view>
					</view>
					<view class="cc" @click="navRankList(index, 'scan')">
						<up-steps :current="getCurrent(pagedata.taskStageList.scanCode?.data)"
							active-color="#ff006e">
							<up-steps-item v-for="(items,indexs) in item.Phase" :key="items.uuid">
								<template #icon>
									<view
										:class="pagedata.taskStageList.scanCode.data[indexs]?.completed==1?'stepitemsc':'stepitems'">
										{{convertNumbers(items.rewardUpper/100,exchangeRate)}}{{symbol}}
									</view>
								</template>
							</up-steps-item>
						</up-steps>
					</view>
					<view class="cb">
						<view class="cnots" >
							<view style="width: 80%;">
								<up-notice-bar icon="volume-fill" :text="noticeList(item.Phase,item.ChanTask.type)"
									direction="column" bgColor="transparent" color="#fff" style="border-radius:0.6rem;"
									fontSize="0.8rem"></up-notice-bar>
							</view>
							<up-button type="primary" :plain="true" :text="t('Detail')" class="detailbtns"
								@click="showTasks(item)"></up-button>
						</view>
					</view>
				</view>
				<!--  getNewUser-->
				<view class="card4" v-show="item.ChanTask.type==4">
					<!--  -->
					<view class="bg-decoration">
						<view class="circle circle-1"></view>
						<view class="circle circle-2"></view>
						<view class="circle circle-3"></view>
						<view class="floating-shape shape-1"></view>
						<view class="floating-shape shape-2"></view>
						<view class="floating-shape shape-3"></view>
					</view>
					
					<view class="ct" @click="navRankList(index, 'invite')">
						<image src="../../static/index/yaoqing.png" />
						<view class="ctr">
							<span style="font-size:0.8rem;font-weight: bold;">{{t('Invite Task')}}</span>
							<span style="font-size:0.7rem;">{{pagedata.taskStageList.getNewUser?.invite}}
								{{t('Friends')}}</span>
						</view>
						<view style="font-weight: bold;font-size: 0.8rem;margin-left: auto;">{{symbol}}
							{{plussTask(item.Phase)/100}}/{{t('Friends')}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!--  -->
		<view class="bottom-nav">
		  <up-tabbar :value="pageIndex" :fixed="false" :placeholder="false" :safeAreaInsetBottom="false">
		    <up-tabbar-item text="" @click="changMainPage('home')">
		      <template #active-icon>
		        <image class="nav-icon-img" src="@/static/img/h_2.png" mode="aspectFit"></image>
		      </template>
		    </up-tabbar-item>
		    <up-tabbar-item text="" @click="changPage('scan')">
		      <template #inactive-icon>
		        <image class="nav-icon-img" src="@/static/img/scan_1.png" mode="aspectFit"></image>
		      </template>
		    </up-tabbar-item>
		    <up-tabbar-item text="" @click="changMainPage('withdraw')">
		      <template #inactive-icon>
		        <image class="nav-icon-img" src="@/static/img/w_1.png" mode="aspectFit"></image>
		      </template>
		    </up-tabbar-item>
		    <up-tabbar-item text="" @click="changMainPage('user')">
		      <template #inactive-icon>
		        <image class="nav-icon-img" src="@/static/img/m_1.png" mode="aspectFit"></image>
		      </template>
		    </up-tabbar-item>
		  </up-tabbar>
		</view>
		<up-popup :show="pagedata.showTask" :mode="pagedata.taskDetail.ChanTask.type!=5?'center':'bottom'" 
		:class="[pagedata.taskDetail.ChanTask.type!=5 ? 'custom-width-center' : 'custom-width-bottom']"
			@close="pagedata.showTask=false" :closeable="true" :round="10">
			<view class="tasks" v-show="pagedata.taskDetail.ChanTask.type==5">
				<view class="bodys">
					<view class="title">{{t(pagedata.taskInfo.title)}}</view>
					<view class="cells">
						<rich-text :nodes="pagedata.taskInfo.content?pagedata.taskInfo.content:'-'"></rich-text>
					</view>

					<view class="prlist" @click="changPage('leaderBoard')">{{t('RANKING LIST')}}</view>
				</view>
			</view>
			<view class="taskc" v-show="pagedata.taskDetail.ChanTask.type!=5">
				<view class="bodys">
					<view class="title">{{t(pagedata.taskInfo.title)}}</view>
					<view class="cells">
						<!-- {{pagedata.taskInfo.content}} -->
						<rich-text :nodes="pagedata.taskInfo.content?pagedata.taskInfo.content:'-'"></rich-text>
					</view>
					<view class="btns">
						<view class="cancel" @click="pagedata.showTask=false">{{ t('cancel') }}</view>
						<view class="sureUp" @click="changPage('scan')">{{ t('Start') }}</view>
					</view>
				</view>
			</view>
		</up-popup>
		<!-- selelct language -->
		<up-popup :show="lagdata.showselect" :round="20" mode="center" @close="setLanguageClose"
			@open="setLanguageOpen">
			<view class="langus">
				<view style="width: 100%;text-align: center;font-size: 01rem;font-weight: bold;">
					{{ t('Select you language') }}
				</view>
				<view class="laglist">
					<view @click="lagdata.index=0" :class="lagdata.index==0?'selects items':'nones items'">
						<span style="font-size:0.8rem;font-weight: bold;">{{ t('Hindi') }}</span>
						<span style="font-size: 0.8rem;">हिन्दी</span>
					</view>
					<view @click="lagdata.index=1" :class="lagdata.index==1?'selects items':'nones items'">
						<span style="font-size: 0.8rem;font-weight: bold;">English</span>
						<span style="font-size: 0.8rem;">English</span>
					</view>
					<view @click="lagdata.index=2" :class="lagdata.index==2?'selects items':'nones items'">
						<span style="font-size: 0.8rem;font-weight: bold;">Hausa</span>
						<span style="font-size: 0.8rem;">Hausa</span>
					</view>
					<view @click="lagdata.index=3" :class="lagdata.index==3?'selects items':'nones items'">
						<span style="font-size: 0.8rem;font-weight: bold;">বাংলা</span>
						<span style="font-size: 0.8rem;">Bengail</span>
					</view>
					<!--   tam-->
					<view @click="lagdata.index=4" :class="lagdata.index==4?'selects items':'nones items'">
						<span style="font-size: 0.8rem;font-weight: bold;">Tamil</span>
						<span style="font-size: 0.8rem;">தமிழ்</span>
					</view>
					<view @click="lagdata.index=5" :class="lagdata.index==5?'selects items':'nones items'">
						<span style="font-size: 0.8rem;font-weight: bold;">اردو</span>
						<span style="font-size: 0.8rem;">Urdu</span>
					</view>
					<view @click="lagdata.index=6" :class="lagdata.index==6?'selects items':'nones items'">
						<span style="font-size: 0.5rem;">Bahasa Indonesia</span>
						<span style="font-size: 0.8rem;">Indonesian</span>
					</view>
					<!--  zh -->
				<!-- 	<view @click="lagdata.index=2" :class="lagdata.index==2?'selects items':'nones items'">
						<span style="font-size: 0.8rem;font-weight: bold;">Chinese</span>
						<span style="font-size: 0.8rem;">Chinese</span>
					</view> -->
					<!--   kan-->
					<!-- <view @click="lagdata.index=3" :class="lagdata.index==3?'selects items':'nones items'">
						<span style="font-size: 0.8rem;font-weight: bold;">Kannada</span>
						<span style="font-size: 0.8rem;">ಕನ್ನಡ </span>
					</view> -->
					<!--   mala-->
					<!-- <view @click="lagdata.index=4" :class="lagdata.index==4?'selects items':'nones items'">
						<span style="font-size: 0.8rem;font-weight: bold;">Malayalam</span>
						<span style="font-size: 0.8rem;">മലയാളം </span>
					</view> -->
					<!--   mar-->
					<!-- <view @click="lagdata.index=5" :class="lagdata.index==5?'selects items':'nones items'">
						<span style="font-size: 0.8rem;font-weight: bold;">Marathi</span>
						<span style="font-size: 0.8rem;"> मराठी</span>
					</view> -->
					
					<!--  tel-->
				<!-- 	<view @click="lagdata.index=7" :class="lagdata.index==7?'selects items':'nones items'">
						<span style="font-size: 0.8rem;font-weight: bold;">Telugu</span>
						<span style="font-size: 0.8rem;"> తెలుగు </span>
					</view> -->
				</view>
				<view class="btns">
					<view class="cancel" @click="setLanguageClose">{{ t('cancel') }}</view>
					<view class="sureUp" @click="selectLanguage">{{ t('confirm') }}</view>
				</view>
			</view>
		</up-popup>
		<!--  -->
		<up-popup :show="countryData.showselect" :round="20" mode="center" @close="setCountryClose"
		    @open="setCountryOpen">
		    <view class="langus">
		        <view >
		            Select Country
		        </view>
		
		        <view class="laglist">
		            <!-- Hindi -->
		            <view @click="countryData.index = 1"
		                :class="countryData.index === 1 ? 'selects items' : 'nones items'">
		                <view class="country-flag-container">
		                    <image class="country-flag" src="../../static/bank-icons/india.png" />
		                </view>
		                <view class="country-text">
		                    <span style="font-size: 0.8rem;font-weight: bold;">India</span>
		                    <span style="font-size: 0.8rem;">हिन्दी</span>
		                </view>
		            </view>
		            <!-- id -->
		            <view @click="countryData.index = 2"
		                :class="countryData.index === 2 ? 'selects items' : 'nones items'">
		                <view class="country-flag-container">
		                    <image class="country-flag" src="../../static/bank-icons/indonesia.png" />
		                </view>
		                <view class="country-text">
		                    <span>Indonesia</span>
		                    <span>Indonesia</span>
		                </view>
		            </view>
		            <!-- hausa -->
		            <view @click="countryData.index = 3"
		                :class="countryData.index === 3 ? 'selects items' : 'nones items'">
		                <view class="country-flag-container">
		                    <image class="country-flag" src="../../static/bank-icons/nigeria.png" />
		                </view>
		                <view class="country-text">
		                    <span>Nigeria</span>
		                    <span>Nijeriya</span>
		                </view>
		            </view>
		
		            <!-- bn -->
		            <view @click="countryData.index = 4"
		                :class="countryData.index === 4 ? 'selects items' : 'nones items'">
		                <view class="country-flag-container">
		                    <image class="country-flag" src="../../static/bank-icons/bangladesh.png" />
		                </view>
		                <view class="country-text">
		                    <span>Bangladesh</span>
		                    <span>বাংলাদেশ</span>
		                </view>
		            </view>
		
		            <!-- -->
		            <view @click="countryData.index = 5"
		                :class="countryData.index === 5 ? 'selects items' : 'nones items'">
		                <view class="country-flag-container">
		                    <image class="country-flag" src="../../static/bank-icons/pakistan.png" />
		                </view>
		                <view class="country-text">
		                    <span>Pakistan</span>
		                    <span>پاکستان</span>
		                </view>
		            </view>
		
		
		        </view>
		        <view class="btns">
		            <view class="cancel" @click="setCountryClose">{{ t('cancel') }}</view>
		            <view class="sureUp" @click="selectCountry">{{ t('confirm') }}</view>
		        </view>
		    </view>
		</up-popup>
		<!-- Tips -->
		<up-popup :show="showTips" :round="20" mode="center" @close="" type="dialog"
			@open="">
			<view class="langus">
				<view class="title">
					{{ t('Tips!') }}
				</view>
				<text  style="color: #fff;">
					{{ t('Please log in and start making money!') }}
				</text>
				<view class="btns">
					<view class="cancel" @click="showTipsClose">{{ t('Look first') }}</view>
					<view class="sureUp" @click="goRegister">{{ t('Log in now') }}</view>
				</view>
			</view>
		</up-popup>
		<!-- Bonus rules -->
		<up-popup :show="rulesPopusShow" :round="20" mode="center" @close="" type="dialog" @open="">
			<view class="langus">
				<view class="title">
					{{ t('Notice') }} 
				</view>
				<div class="rules-content" v-html="boundRulesContent"></div>
				<!-- <view class="know">
					<checkbox 
						:value="isChecked" 
						:checked="isChecked"
						@click="handleChange"
					/>
					I Know
				</view> -->
				<view class="sureUp" @click="iKnowConfirm">
					{{ t('confirm') }}
				</view>
			</view>
		</up-popup>

		<div class="telegram-wrapper">
		  <div 
		    class="telegram-icon"
		    @mousedown="startDrag"
		    @touchstart="startDrag"
		    :style="{
		      top: dragPosition.y + 'px',
		      left: '980px',
		      zIndex: '99999',
		      position: 'fixed'
		    }"
		  >
		    <img style="width: 2rem; height: 2rem;" src="@/static/teltgram.png" />
		  </div>
		</div>
	</view>

</template>



<style lang="scss" scoped>
/*  */
.main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  position: relative;
  overflow-x: hidden;
  
  /*  */
  &::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      radial-gradient(circle at 25% 25%, #00d4ff22 0%, transparent 50%),
      radial-gradient(circle at 75% 75%, #ff006e22 0%, transparent 50%),
      linear-gradient(45deg, transparent 30%, #8338ec11 50%, transparent 70%);
    pointer-events: none;
    z-index: 1;
  }
  
  /*  */
  &::after {
    content: '';
    position: fixed;
    width: 0;
    height: 0;
    border-left: 100rpx solid transparent;
    border-right: 100rpx solid transparent;
    border-bottom: 150rpx solid rgba(0, 212, 255, 0.1);
    top: 10%;
    right: 10%;
    animation: rotateTriangle 8s linear infinite;
    z-index: 1;
  }
}

/*  */
.main > * {
  position: relative;
  z-index: 10;
}

/*  -  */
.head {
  width: 100%;
  padding: 40rpx 3% 20rpx 3%;
  box-sizing: border-box;
  
  /*  -  */
  .languageSelect {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25rpx 30rpx;
    margin-bottom: 30rpx;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    border: 2rpx solid #00d4ff;
    border-radius: 0;
    box-shadow: 0 0 30rpx rgba(0, 212, 255, 0.3);
    box-sizing: border-box;
    
    span:first-child {
      font-size: 40rpx;
      font-weight: 900;
      color: #00d4ff;
      text-transform: uppercase;
      letter-spacing: 2rpx;
    }
    
    span:last-child {
      background: linear-gradient(135deg, #00d4ff, #ff006e);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      border: 2rpx solid #00d4ff;
      padding: 15rpx 30rpx;
      border-radius: 0;
      font-size: 28rpx;
      font-weight: 700;
      transition: all 0.3s ease;
      text-transform: uppercase;
      
      &:active {
        transform: scale(0.95);
        box-shadow: 0 0 20rpx rgba(0, 212, 255, 0.5);
      }
    }
  }
  
  /*  -  */
  .swiper {
    border-radius: 0;
    overflow: hidden;
    box-shadow: 
      0 0 0 3rpx #00d4ff,
      0 20rpx 40rpx rgba(0, 0, 0, 0.5);
    position: relative;
    
    /*  */
    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      z-index: 3;
    }
    
    &::before {
      top: 0;
      left: 0;
      border-top: 30rpx solid #ff006e;
      border-right: 30rpx solid transparent;
    }
    
    &::after {
      bottom: 0;
      right: 0;
      border-bottom: 30rpx solid #8338ec;
      border-left: 30rpx solid transparent;
    }
    
    ::v-deep .up-swiper,
    ::v-deep .u-swiper {
      border-radius: 0;
      
      .swiper-slide image {
        border-radius: 0;
        filter: brightness(0.8) contrast(1.2);
      }
    }
  }
}

/*  -  */
.card1 {
  // background: linear-gradient(135deg, #1e1e2e, #2a2a3e);
  border: 2rpx solid transparent;
  background-clip: padding-box;
  border-radius: 0;
  margin: 0 40rpx 50rpx;
  // padding: 50rpx;
  box-shadow: 
    0 0 0 2rpx #00d4ff,
    0 20rpx 40rpx rgba(0, 0, 0, 0.4),
    inset 0 0 100rpx rgba(0, 212, 255, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  
  /*  */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 50rpx solid #ff006e;
    border-right: 50rpx solid transparent;
  }
  
  /*  */
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 50rpx solid #8338ec;
    border-left: 50rpx solid transparent;
  }
  
  /*  */
  &:active {
    transform: scale(0.98);
    box-shadow: 
      0 0 0 2rpx #ff006e,
      0 10rpx 30rpx rgba(0, 0, 0, 0.6),
      inset 0 0 100rpx rgba(255, 0, 110, 0.1);
  }
  
  /*  */
  .ct {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
	margin-top: 20px;
    
    image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 0;
      padding: 10rpx;
      filter: brightness(0) invert(1);
    }
    
    .ctr {
      flex: 1;
      margin-left: 30rpx;
      
      span:first-child {
        display: block;
        font-size: 32rpx;
        font-weight: 800;
        color: #ffffff;
        margin-bottom: 10rpx;
        text-transform: uppercase;
        letter-spacing: 1rpx;
      }
      
      span:last-child {
        display: block;
        font-size: 24rpx;
        color: #00d4ff;
        font-weight: 600;
      }
    }
    
    /*  */
    > view:last-child {
      font-size: 36rpx;
      font-weight: 900;
      background: linear-gradient(200deg, #2a2a3e, #ff006e);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: none;
    }
  }
  
  /*  */
  .cc {
    margin-bottom: 30rpx;
    
    ::v-deep .up-steps {
      .up-steps-item {
        .up-steps-item__line {
          background: linear-gradient(90deg, #2a2a3e, #3a3a4e);
          height: 4rpx;
          
          &.up-steps-item__line--active {
            background: linear-gradient(90deg, #00d4ff, #ff006e);
          }
        }
        
        .up-steps-item__content {
          .up-steps-item__content__title {
            color: #ffffff;
          }
        }
      }
    }
  }
  
  /*  */
  .stepitems,
  .stepitemsc {
    width: 70rpx;
    height: 70rpx;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22rpx;
    font-weight: 800;
    color: #ffffff;
    border: 2rpx solid;
    transition: all 0.3s ease;
    text-transform: uppercase;
  }
  
  .stepitems {
    background: #2a2a3e;
  }
  
  .stepitemsc {
    background: linear-gradient(135deg, #00d4ff, #ff006e);
    border-color: #00d4ff;
    box-shadow: 0 0 20rpx rgba(0, 212, 255, 0.5);
  }
  
  /*  */
  .cb {
    .cnots {
      display: flex;
      align-items: center;
      gap: 20rpx;
      padding: 20rpx;

    }
    
    .detailbtn,
    .detailbtns {
      background: linear-gradient(135deg, #00d4ff, #ff006e) !important;
      border: none !important;
      border-radius: 20px !important;
      color: #ffffff !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
      box-shadow: 0 0 20rpx rgba(0, 212, 255, 0.3) !important;
      
      &:active {
        transform: scale(0.95);
        box-shadow: 0 0 30rpx rgba(255, 0, 110, 0.5) !important;
      }
    }
  }
}

/*  */
.card4 {
  background: linear-gradient(135deg, #1e1e2e, #2a2a3e);
  border-radius: 0;
  margin: 0 40rpx 50rpx;
  padding: 50rpx;
  box-shadow: 
    0 0 30rpx rgba(255, 0, 110, 0.3),
    inset 0 0 100rpx rgba(255, 0, 110, 0.05);
  position: relative;
  overflow: hidden;

  .ct {
    display: flex;
    align-items: center;
    
    image {
      width: 80rpx;
      height: 80rpx;
      filter: brightness(0) invert(1);
    }
    
    .ctr {
      flex: 1;
      margin-left: 30rpx;
      
      span {
        color: #ffffff;
        display: block;
        
        &:first-child {
          font-size: 32rpx;
          font-weight: 800;
          margin-bottom: 10rpx;
          text-transform: uppercase;
        }
        
        &:last-child {
          font-size: 24rpx;
          color: #ff006e;
        }
      }
    }
    
    > view:last-child {
      font-size: 36rpx;
      font-weight: 900;
      color: #ff006e;
    }
  }
}


/*  */
.countdownBox {
  background: linear-gradient(135deg, #1e1e2e, #2a2a3e);
  border: 2rpx solid #8338ec;
  border-radius: 0;
  margin: 0 40rpx 50rpx;
  padding: 50rpx;
  box-shadow: 
    0 0 30rpx rgba(131, 56, 236, 0.3),
    inset 0 0 100rpx rgba(131, 56, 236, 0.05);
  position: relative;
  
  /*  */
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 25rpx solid transparent;
    border-bottom: 25rpx solid transparent;
    border-right: 40rpx solid #8338ec;
  }
  
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 25rpx solid transparent;
    border-bottom: 25rpx solid transparent;
    border-left: 40rpx solid #8338ec;
  }
  
  .countdown-title {
    color: #ffffff;
    text-align: center;
    font-size: 36rpx;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 30rpx;
  }
  
  .countdown-time {
    display: flex;
    justify-content: center;
    gap: 20rpx;
    
    .time-item {
      background: linear-gradient(135deg, #8338ec, #ff006e);
      color: #ffffff;
      padding: 20rpx;
      border-radius: 0;
      text-align: center;
      min-width: 80rpx;
      border: 2rpx solid #8338ec;
      
      .time-value {
        font-size: 36rpx;
        font-weight: 900;
        display: block;
      }
      
      .time-label {
        font-size: 20rpx;
        text-transform: uppercase;
        margin-top: 5rpx;
        display: block;
      }
    }
  }
}

/*  */
::v-deep .up-popup {
  .up-popup__content {
    background: #1e1e2e !important;
    border: 2rpx solid #00d4ff !important;
    border-radius: 0 !important;
    box-shadow: 0 0 50rpx rgba(0, 212, 255, 0.5) !important;
    
    .popup-title {
      color: #ffffff !important;
      text-transform: uppercase !important;
    }
    
    .popup-text {
      color: #cccccc !important;
    }
  }
}



/*  */
@keyframes rotateTriangle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes neonPulse {
  0%, 100% { 
    box-shadow: 0 0 20rpx rgba(0, 212, 255, 0.5);
  }
  50% { 
    box-shadow: 0 0 40rpx rgba(0, 212, 255, 0.8);
  }
}

@keyframes shrink {
  0% { transform: scale(1); }
  100% { transform: scale(0.95); }
}

@keyframes grow {
  0% { transform: scale(0.95); }
  100% { transform: scale(1.05); }
}

/*  */
.aniview0, .aniview1, .aniview2, .aniview3, .aniview4, .aniview5 {
  &.shrink {
    animation: shrink 0.2s ease-in-out;
  }
  
  &.grow {
    animation: grow 0.3s ease-in-out;
  }
}

/*  */
.sure {
  background: linear-gradient(135deg, #00d4ff, #ff006e);
  border: 2rpx solid #00d4ff;
  border-radius: 0;
  color: #ffffff;
  padding: 25rpx 40rpx;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 0 20rpx rgba(0, 212, 255, 0.3);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.95);
    box-shadow: 0 0 30rpx rgba(255, 0, 110, 0.5);
  }
}



/*  */
@media (min-width: 768px) {
  .card1,
  .card4,
  .countdownBox {
    margin: 0 auto 50rpx;
    // max-width: 700rpx;
  }
}

.aniview0 {
  transition: transform 0.1s;
}

.aniview1 {
  transition: transform 0.1s;
}

.aniview2 {
  transition: transform 0.1s;
}

.aniview3 {
  transition: transform 0.1s;
}

.aniview4 {
  transition: transform 0.1s;
}

.aniview5 {
  transition: transform 0.1s;
}
.aniview0,
.aniview1,
.aniview2,
.aniview3 {
  width: 100%;
}

.shrink {
  transform: scale(0.96);
}

.grow {
  transform: scale(1);
}

.prlist {
  margin: 2rem auto 1.5rem auto;
 border: 2px solid rgba(255, 255, 255, 0.6);
 color: #ffffff;
 background: rgba(255, 255, 255, 0.1);
  width: 70%;
  border-radius: 3rem;
  text-align: center;
  font-size: 0.8rem;
  padding: 0.6rem;
}

.taskc {
	  flex-flow: column;
	  align-items: center;
	  justify-content: center;
	  color: #fff;
	  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
	  // border-radius: 25rpx;
	  box-shadow: 
	    0 20rpx 60rpx rgba(0, 0, 0, 0.2),
	    inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
	  position: relative;
	  overflow: hidden;
	  z-index: 1;
		 /*  */
		  &::before,
		  &::after {
		    content: '';
		    position: absolute;
		    border-radius: 50%;
		    background: rgba(255, 255, 255, 0.1);
		    backdrop-filter: blur(10px);
		    animation: float 6s ease-in-out infinite;
		  }
		
		  &::before {
		    width: 120rpx;
		    height: 120rpx;
		    top: -30rpx;
		    right: -40rpx;
		    animation-delay: 0s;
		  }
		
		  &::after {
		    width: 80rpx;
		    height: 80rpx;
		    bottom: -20rpx;
		    left: -25rpx;
		    animation-delay: 3s;
		  }
  .bodys {
    padding: 1rem;
    width: 17rem;
    .title {
      text-align: center;
      font-size: 1rem;
      font-weight: bold;
    }

    .cells {
      margin: 0.6rem;
      font-size: 0.8rem;
    }

    .ti {
      font-size: 0.9rem;
      font-weight: bold;
    }

    .item {
      font-size: 0.8rem;
    }
  }


}

.tasks {
  width: 100%;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  // border-radius: 25rpx;
  box-shadow: 
    0 20rpx 60rpx rgba(0, 0, 0, 0.2),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  z-index: 1;
	 /*  */
	  &::before,
	  &::after {
	    content: '';
	    position: absolute;
	    border-radius: 50%;
	    background: rgba(255, 255, 255, 0.1);
	    backdrop-filter: blur(10px);
	    animation: float 6s ease-in-out infinite;
	  }
	
	  &::before {
	    width: 120rpx;
	    height: 120rpx;
	    top: -30rpx;
	    right: -40rpx;
	    animation-delay: 0s;
	  }
	
	  &::after {
	    width: 80rpx;
	    height: 80rpx;
	    bottom: -20rpx;
	    left: -25rpx;
	    animation-delay: 3s;
	  }
  .bodys {
    padding: 3%;
    width: 94%;

    .title {
      text-align: center;
      font-size: 1rem;
      font-weight: bold;
    }

    .cells {
      margin: 0.6rem;
    }

    .ti {
      font-size: 0.9rem;
      font-weight: bold;
    }

    .item {
      font-size: 0.8rem;
    }
  }
}

::v-deep .u-steps {
  width: 100%;

  .u-steps-item__line {
    // width: 66px !important;
    // left: 33px !important;
    background-color: rgb(150, 151, 153);
  }

  .u-steps-item__wrapper--row {
    width: 2.4rem;
    height: 2.4rem;
	 background-color: transparent; /*  */
	  border-radius: 0; /*  */
  }

  .stepitems {
    line-height: 1.6rem;
    text-align: center;
  }

  .u-steps-item__line--row {
    top: 1.2rem;
    height: 2px;
  }
}

.indicators {
  width: 6px;
  height: 6px;
  margin: 0 0.2rem;
  animation: expandWidths 500ms forwards;
}

.indicatorsuper {
  width: 0.8rem;
  height: 6px;
  margin: 0 0.4rem;
  animation: expandWidth 800ms forwards;
}

@keyframes expandWidth {
  0% {
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.6);
    transform: scaleX(1);
  }

  100% {
    border-radius: 2px;
    transform: scaleX(1.6);
    background: rgba(255, 255, 255, 0.9);
  }
}

@keyframes expandWidths {
  0% {
    border-radius: 2px;
    transform: scaleX(1.6);
    background: rgba(255, 255, 255, 0.9);
  }

  100% {
    transform: scaleX(1);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
  }
}
.custom-button {
  width: 96px;
  height: 36px;
   border: 2px solid transparent;
  font-size: 0.5rem;
 background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  color: #fff;
  font-weight: bold;
  line-height: 36px;
  margin-bottom: 0.2rem;
  margin-left: 1.4rem;
  border-radius: 0.2rem;
  text-align: center;
  position: relative; /* ， */
  animation: glowBorder 1.5s infinite;
}

/*  */
@keyframes glowBorder {
  0%, 100% {
    box-shadow: 0 0 0px rgba(255, 255, 255, 0.0);
    border-color: transparent;
  }
  50% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    border-color: #fff;
  }
}


.content {
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  min-height: 100vh;
}

.bottom {
  position: fixed;
  bottom: 0;
  z-index: 999;
  width: var(--uni-app-max-width);
}

.body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0 2rem 0;
  box-sizing: border-box;

  .swipers {
    width: 94%;
    margin: 0.5rem 0;
  }

  .notices {
    width: 94%;
    margin-top: 0.6rem;
  }

  .card1,
  .card2,
  .card4 {
    // width: 94%;
    margin-top: 0.6rem;
    border-radius: 25rpx;
    // background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 
      0 20rpx 60rpx rgba(0, 0, 0, 0.1),
      0 0 0 1px rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;

    /*  */
    .bg-decoration {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 1;

      .circle {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
      }

      .circle-1 {
        width: 120rpx;
        height: 120rpx;
        top: 10%;
        right: -30rpx;
        animation: float 6s ease-in-out infinite;
      }

      .circle-2 {
        width: 80rpx;
        height: 80rpx;
        bottom: 20%;
        left: -20rpx;
        animation: float 8s ease-in-out infinite reverse;
      }

      .circle-3 {
        width: 60rpx;
        height: 60rpx;
        top: 60%;
        right: 15%;
        animation: float 10s ease-in-out infinite;
      }

      .floating-shape {
        position: absolute;
        font-size: 30rpx;
        animation: bounce 3s ease-in-out infinite;
        opacity: 0.6;
      }

      .shape-1 {
        top: 15%;
        left: 10%;
        animation-delay: 0s;
      }

      .shape-2 {
        top: 45%;
        right: 10%;
        animation-delay: 1s;
      }

      .shape-3 {
        bottom: 25%;
        left: 15%;
        animation-delay: 2s;
      }
    }

    /*  */
    .ct, .cc, .cb {
      position: relative;
      z-index: 10;
    }
  }

  /*  */
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
  }

  @keyframes bounce {
    0%, 100% { 
      transform: translateY(0px) rotate(0deg); 
      opacity: 0.4;
    }
    50% { 
      transform: translateY(-10px) rotate(5deg); 
      opacity: 0.8;
    }
  }

  .card2 {
    /*  -  */
    background: linear-gradient(135deg, 
      rgba(255, 99, 132, 0.1) 0%, 
      rgba(255, 255, 255, 0.95) 50%, 
      rgba(255, 159, 64, 0.1) 100%
    );
    
    .bg-decoration .circle {
      &.circle-1 {
        background: rgba(255, 99, 132, 0.15);
      }
      &.circle-2 {
        background: rgba(255, 159, 64, 0.12);
      }
      &.circle-3 {
        background: rgba(255, 205, 86, 0.1);
      }
    }
  }

  .card4 {
    /*  -  */
    background: linear-gradient(135deg, 
      rgba(54, 162, 235, 0.1) 0%, 
      rgba(255, 255, 255, 0.95) 50%, 
      rgba(153, 102, 255, 0.1) 100%
    );
    
    .bg-decoration .circle {
      &.circle-1 {
        background: rgba(54, 162, 235, 0.15);
      }
      &.circle-2 {
        background: rgba(153, 102, 255, 0.12);
      }
      &.circle-3 {
        background: rgba(75, 192, 192, 0.1);
      }
    }
  }

  /*  */
  @keyframes float {
    0%, 100% { 
      transform: translateY(0px) scale(1); 
      opacity: 0.6;
    }
    50% { 
      transform: translateY(-15px) scale(1.05); 
      opacity: 0.8;
    }
  }

  @keyframes bounce {
    0%, 100% { 
      transform: translateY(0px) rotate(0deg); 
      opacity: 0.6;
    }
    50% { 
      transform: translateY(-8px) rotate(3deg); 
      opacity: 0.9;
    }
  }

  /*  */
  .card1,
  .card2,
  .card4 {
    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.98);
      box-shadow: 
        0 5rpx 20rpx rgba(0, 0, 0, 0.15),
        0 0 0 1rpx rgba(255, 255, 255, 0.3);
      
      .bg-decoration {
        .circle {
          animation-duration: 3s;
        }
        
        .floating-shape {
          animation-duration: 1.5s;
        }
      }
    }
  }

  /*  */
  .swipers {
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: -10rpx;
      right: -10rpx;
      width: 100rpx;
      height: 100rpx;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      animation: float 8s ease-in-out infinite;
      z-index: 1;
    }
    
    &::after {
      content: '🎯';
      position: absolute;
      bottom: 20rpx;
      left: 20rpx;
      font-size: 40rpx;
      animation: bounce 4s ease-in-out infinite;
      z-index: 1;
    }
  }

  .card2 {
    .heads {
      font-size: 0.6rem;
      padding: 0.8rem 0;
      width: 100%;
      text-align: center;
      border-radius: 0.6rem 0.6rem 0 0;
      color: #fff;
      background: linear-gradient(to right, #fe8400, #ff5800);
    }

    .ct {
      padding: 3%;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: flex-start;

      image {
        height: 2rem;
        width: 2rem;
      }

      .ctr {
        margin-left: 0.4rem;
        display: flex;
        flex-flow: column;
      }
    }

    .cc {
      padding: 0 3%;
      color: #f56c6c;
      text-align: center;
      font-size: 0.8rem;
      font-weight: bold;
    }

    .cb {
      padding: 3%;

      .cnots {
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  .card1 {
    .ct {
      // padding: 3%;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: flex-start;

      image {
        height: 2rem;
        width: 2rem;
      }

      .ctr {
        margin-left: 0.4rem;
        display: flex;
        flex-flow: column;
      }
    }

    .cc {
      padding: 0 3% 3% 3%;
    }

    .cb {
      padding: 0 3% 3% 3%;

      .cnots {
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem;
      }
    }
  }

  .card4 {
    .ct {
      padding: 3%;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: flex-start;

      image {
        height: 2rem;
        width: 2rem;
      }

      .ctr {
        margin-left: 0.4rem;
        display: flex;
        flex-flow: column;
      }

      .get_box {
        margin-left: auto;
       background: linear-gradient(135deg, #00d4ff, #ff006e) !important;
        color: #fff;
        padding: 0.3rem 0.8rem;
        border-radius: 1rem;
        font-size: 0.7rem;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
}

.tops {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 30rpx;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  
  .lefts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #fff;
    
    .rt {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
      
      image {
        width: 50rpx;
        height: 50rpx;
        margin-right: 15rpx;
      }
      
      view {
        font-size: 32rpx;
        font-weight: 700;
      }
    }
    
    .liti {
      font-size: 24rpx;
      opacity: 0.8;
      text-transform: uppercase;
      letter-spacing: 1rpx;
    }
  }
  
  .rights {
  	display: flex;
  	align-items: center;
  	gap: 15px;
  	/*  */
  
  	.globe-icon {
  		width: 24px;
  		height: 24px;
  	}
  }
}

.detailbtn {
  width: 4rem !important;
  height: 1.6rem !important;
  background: #e4e0fd !important;
  color: #7965f4 !important;
  border: 1px solid #7965f4 !important;
  border-radius: 20px !important;
  font-size: 0.6rem !important;
}

.detailbtns {
  width: 4rem !important;
  height: 1.6rem !important;
  background: #f3d9d6 !important;
  color: #f56c6c !important;
  border: 1px solid #f56c6c !important;
  border-radius: 1rem !important;
  font-size: 0.6rem !important;
}
.detailbtns,
.detailbtn {
  ::v-deep .u-button__text {
    font-size: 0.8rem !important;
  }
}



.langus {
  width: 18rem;
  padding: 1.5rem 1rem;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  border-radius: 25rpx;
  box-shadow: 
    0 20rpx 60rpx rgba(0, 0, 0, 0.2),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  z-index: 1;

  /*  */
  &::before,
  &::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    animation: float 6s ease-in-out infinite;
  }

  &::before {
    width: 120rpx;
    height: 120rpx;
    top: -30rpx;
    right: -40rpx;
    animation-delay: 0s;
  }

  &::after {
    width: 80rpx;
    height: 80rpx;
    bottom: -20rpx;
    left: -25rpx;
    animation-delay: 3s;
  }

  /*  */
  > view:first-child {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
  }
}
.country-flag {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.country-flag-container {
    width: 30px;
    height: 30px;
    margin-right: 15px;
    overflow: hidden;
    border-radius: 50%;
    flex-shrink: 0; /*  */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eaeaea;
}
.country-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  
  span:first-child {
    font-size: 0.9rem;
    font-weight: bold;
    color: inherit;
    margin-bottom: 0.2rem;
  }
  
  span:last-child {
    font-size: 0.75rem;
    opacity: 0.8;
    color: inherit;
  }
}

/*  */
.selects .country-text span {
  color: #667eea !important;
}

.nones .country-text span {
  color: #ffffff !important;
}
.laglist {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1rem 0;
  position: relative;
  z-index: 2;
}

.items {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.8rem;
  border-radius: 15rpx;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px);
  
  span:first-child {
    font-weight: 700;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
  }
  
  span:last-child {
    font-size: 0.75rem;
    opacity: 0.8;
  }

  /*  */
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: all 0.4s ease;
    border-radius: 50%;
  }

  &:hover::before {
    width: 200%;
    height: 200%;
  }
}

.selects {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #667eea;
  transform: scale(1.05);
  box-shadow: 
    0 10rpx 30rpx rgba(0, 0, 0, 0.15),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
  
  span {
    color: #667eea !important;
    text-shadow: none;
  }
  
  &::after {
    content: '✓';
    position: absolute;
    top: 8rpx;
    right: 8rpx;
    width: 35rpx;
    height: 35rpx;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.4);
  }
}

.nones {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 4rpx 15rpx rgba(0, 0, 0, 0.1),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.2);
  
  &:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.15);
  }
  
  &:active {
    transform: scale(0.98);
  }

  span {
    color: #ffffff !important;
  }
}

/* Button styles */
.btns {
  width: 100%;
  display: flex;
  flex-flow: row;
  align-items: center;
  font-size: 0.8rem;
  font-weight: bold;
  justify-content: space-around;
  position: relative;
  z-index: 2;
  margin-top: 1rem;
}

.cancel {
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  text-align: center;
  padding: 0.6rem 1.2rem;
  border-radius: 25rpx;
  width: 35%;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  
  &:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.2);
  }
  
  &:active {
    transform: translateY(0) scale(0.98);
  }
}

.sureUp {
  cursor: pointer;
  text-align: center;
  border: 2px solid transparent;
  background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
  color: #667eea;
  padding: 0.6rem 1.2rem;
  border-radius: 25rpx;
  width: 35%;
  transition: all 0.3s ease;
  font-weight: 700;
  box-shadow: 
    0 8rpx 20rpx rgba(255, 255, 255, 0.3),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent);
    transition: left 0.6s;
  }
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 
      0 12rpx 30rpx rgba(255, 255, 255, 0.4),
      0 0 0 1px rgba(102, 126, 234, 0.2);
    
    &::before {
      left: 100%;
    }
  }
  
  &:active {
    transform: translateY(-1px) scale(0.98);
  }
}

/*  */
@keyframes float {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg);
    opacity: 0.6;
  }
  33% { 
    transform: translateY(-15px) rotate(120deg);
    opacity: 0.8;
  }
  66% { 
    transform: translateY(-8px) rotate(240deg);
    opacity: 0.4;
  }
}

/*  */
.laglist::before,
.laglist::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  animation: float 8s ease-in-out infinite;
  pointer-events: none;
}

.laglist::before {
  width: 60rpx;
  height: 60rpx;
  top: 20%;
  right: 10%;
  animation-delay: 1s;
}

.laglist::after {
  width: 40rpx;
  height: 40rpx;
  bottom: 30%;
  left: 15%;
  animation-delay: 4s;
}

.tips {
  width: 88%;
  padding: 6% 4% 2% 4%;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgb(237, 239, 240);
  .title {
    width: 100%;
    text-align: center;
    font-size: 01rem;
    font-weight: bold;
    margin-bottom: 2%;
  }
  .tipsContent {
    color: rgb(102, 102, 102);
    font-size: 0.8rem;
  }
}
.bonusRules {
  width: 23rem;
  padding: 2%;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  .title {
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 2%;
  }
  .bonusRulesContent {
    color: rgb(102, 102, 102);
    font-size: 0.8rem;
  }
}
.text-btns {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-size: 0.8rem;
  padding-bottom: 0.8rem;
  .btn:nth-child(1) {
    color: rgb(102, 102, 102);
  }
  .btn:nth-child(2) {
    color: #fff;
  }
}



.know {
  display: flex;
  align-items: center;
  width: 100%;
}
.rules-content {
  font-size: 12px;
  line-height: 1.5;
  color: #fff;

  p {
    margin-bottom: 10px;
  }

  span[style*='background-color'] {
    padding: 2px 4px;
    border-radius: 2px;
  }
}
.installBookMark {
  position: relative;
  width: 75%;
  padding: 1rem;
  height: 15vh;
  .buttonW {
    display: flex;
    position: absolute;
    bottom: 1.5rem;
    right: 3rem;
    font-size: 0.8rem;
    color: cornflowerblue;
    .cancel {
      margin-right: 50px;
    }
  }
  .bmc {
    display: flex;
    margin-top: 1.5rem;
    img {
      margin-right: 10px;
    }
  }
}

// ，
.main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  
  // 
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
  }
}

// 
.head {
  padding: 30rpx 40rpx;
  position: relative;
  z-index: 10;
  
  .language-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;
    
    .logo {
      font-size: 48rpx;
      font-weight: 800;
      color: white;
      text-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
    }
    
    .language-btn {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      padding: 15rpx 30rpx;
      border-radius: 50rpx;
      color: white;
      font-size: 26rpx;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.95);
        background: rgba(255, 255, 255, 0.3);
      }
    }
  }
  
  // 
  .banner-container {
    border-radius: 25rpx;
    overflow: hidden;
    box-shadow: 0 15rpx 40rpx rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    ::v-deep .up-swiper {
      .swiper-slide {
        border-radius: 25rpx;
        overflow: hidden;
        
        image {
          width: 100%;
          height: 300rpx;
          object-fit: cover;
        }
      }
      
      .swiper-pagination {
        .swiper-pagination-bullet {
          background: rgba(255, 255, 255, 0.5);
          
          &.swiper-pagination-bullet-active {
            background: white;
          }
        }
      }
    }
  }
}

// 
.task-section {
  flex: 1;
  padding: 0 40rpx 40rpx;
  
  .section-title {
    color: white;
    font-size: 36rpx;
    font-weight: 700;
    margin-bottom: 30rpx;
    text-align: center;
    text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
  }
  
  .task-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25rpx;
  }
  
  .task-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 25rpx;
    padding: 40rpx;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
    
    &:active {
      transform: scale(0.98);
      box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.15);
    }
    
    // 
    &::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg, transparent, rgba(102, 126, 234, 0.1), transparent);
      transform: rotate(45deg);
      transition: all 0.6s ease;
      opacity: 0;
    }
    
    &:hover::before {
      opacity: 1;
      transform: rotate(45deg) translate(20rpx, 20rpx);
    }
    
    .task-header {
      display: flex;
      align-items: center;
      margin-bottom: 25rpx;
      
      .task-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 20rpx;
        background: linear-gradient(135deg, #667eea, #764ba2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 25rpx;
        font-size: 40rpx;
        box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.3);
      }
      
      .task-info {
        flex: 1;
        
        .task-title {
          font-size: 32rpx;
          font-weight: 700;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .task-subtitle {
          font-size: 24rpx;
          color: #666;
        }
      }
      
      .task-reward {
        text-align: right;
        
        .reward-amount {
          font-size: 36rpx;
          font-weight: 800;
          color: #4caf50;
          margin-bottom: 4rpx;
        }
        
        .reward-label {
          font-size: 22rpx;
          color: #999;
        }
      }
    }
    
    .task-progress {
      margin-bottom: 25rpx;
      
      .progress-bar {
        height: 8rpx;
        background: #f0f0f0;
        border-radius: 4rpx;
        overflow: hidden;
        margin-bottom: 15rpx;
        
        .progress-fill {
          height: 100%;
          background: linear-gradient(90deg, #667eea, #764ba2);
          border-radius: 4rpx;
          transition: width 0.3s ease;
        }
      }
      
      .progress-text {
        display: flex;
        justify-content: space-between;
        font-size: 24rpx;
        color: #666;
      }
    }
    
    .task-actions {
      display: flex;
      gap: 20rpx;
      
      .action-btn {
        flex: 1;
        padding: 20rpx;
        border-radius: 15rpx;
        text-align: center;
        font-size: 26rpx;
        font-weight: 600;
        transition: all 0.3s ease;
        
        &.primary {
          background: linear-gradient(135deg, #667eea, #764ba2);
          color: white;
          box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.3);
          
          &:active {
            transform: translateY(2rpx);
            box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.4);
          }
        }
        
        &.secondary {
          background: rgba(102, 126, 234, 0.1);
          color: #667eea;
          border: 1px solid rgba(102, 126, 234, 0.3);
          
          &:active {
            background: rgba(102, 126, 234, 0.2);
          }
        }
      }
    }
  }
}

// 
.bottom-section {
  padding: 30rpx 40rpx;
  
  .start-btn {
    width: 100%;
    padding: 25rpx;
    background: linear-gradient(135deg, #4caf50, #45a049);
    color: white;
    border-radius: 25rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 700;
    box-shadow: 0 10rpx 30rpx rgba(76, 175, 80, 0.3);
    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.98);
      box-shadow: 0 5rpx 20rpx rgba(76, 175, 80, 0.4);
    }
  }
}

// 
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .popup-content {
    width: 90%;
    max-width: 600rpx;
    background: white;
    border-radius: 25rpx;
    padding: 50rpx;
    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
    
    .popup-title {
      font-size: 36rpx;
      font-weight: 700;
      color: #333;
      text-align: center;
      margin-bottom: 30rpx;
    }
    
    .popup-text {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
      margin-bottom: 40rpx;
    }
    
    .popup-actions {
      display: flex;
      gap: 20rpx;
      
      .popup-btn {
        flex: 1;
        padding: 20rpx;
        border-radius: 15rpx;
        text-align: center;
        font-size: 28rpx;
        font-weight: 600;
        
        &.primary {
          background: linear-gradient(135deg, #667eea, #764ba2);
          color: white;
        }
        
        &.secondary {
          background: #f5f5f5;
          color: #666;
        }
      }
    }
  }
}

// 
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

// 
@media (min-width: 768px) {
  .task-section {
    .task-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

// 
.sure {
  cursor: pointer;
  text-align: center;
  border: 0.1rem solid #ff5800;
  background: linear-gradient(to right, #fe8400, #ff5800);
  color: #fff;
  padding: 0.4rem;
  border-radius: 1.4rem;
  width: 30%;
}

.tips {
  width: 88%;
  padding: 6% 4% 2% 4%;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgb(237, 239, 240);
  .title {
    width: 100%;
    text-align: center;
    font-size: 01rem;
    font-weight: bold;
    margin-bottom: 2%;
  }
  .tipsContent {
    color: rgb(102, 102, 102);
    font-size: 0.8rem;
  }
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  z-index: 999;
  width: var(--uni-app-max-width);

  .nav-icon-img {
    width: 60rpx;
    height: 60rpx;
    transition: all 0.3s ease;

    &.active {
      transform: scale(1.2);
      filter: brightness(1.2);
    }
  }
}
</style>